<template>
    <div class="chart-container">
      <!-- 标题区 -->
      <div class="header">
        <el-row>
          <el-col :span="24">
            <h2 class="title">数据可视化分析平台</h2>
          </el-col>
        </el-row>
      </div>
  
      <!-- 图表区 -->
      <el-row :gutter="20" class="chart-row">
        <el-col :span="8">
          <div class="chart-box">
            <div class="chart-title">销售分布</div>
            <div id="pieChart" class="chart"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="chart-box">
            <div class="chart-title">月度销售额</div>
            <div id="barChart" class="chart"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="chart-box">
            <div class="chart-title">增长趋势</div>
            <div id="lineChart" class="chart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue'
  import * as echarts from 'echarts'
  
  onMounted(() => {
    initPieChart()
    initBarChart()
    initLineChart()
  })
  
  // 初始化饼图
  const initPieChart = () => {
    const pieChart = echarts.init(document.getElementById('pieChart'))
    pieChart.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        data: [
          { value: 1048, name: '产品A' },
          { value: 735, name: '产品B' },
          { value: 580, name: '产品C' },
          { value: 484, name: '产品D' }
        ]
      }]
    })
  }
  
  // 初始化柱状图
  const initBarChart = () => {
    const barChart = echarts.init(document.getElementById('barChart'))
    barChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }]
    })
  }
  
  // 初始化折线图
  const initLineChart = () => {
    const lineChart = echarts.init(document.getElementById('lineChart'))
    lineChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.5)',
          shadowBlur: 10
        }
      }]
    })
  }
  </script>
  
  <style scoped>
  .chart-container {
    min-height: 100vh;
    background: linear-gradient(to right, #1a2980, #26d0ce);
    padding: 20px;
  }
  
  .header {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .title {
    color: #fff;
    font-size: 28px;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
  }
  
  .chart-row {
    margin-top: 20px;
  }
  
  .chart-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.1);
  }
  
  .chart-title {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .chart {
    height: 300px;
    width: 100%;
  }
  </style>